<template>
	<div style="border: 1px solid #eee;margin: 20px 20px 0 20px;">
		<h3>{{columnInfo.name}}-赠送专栏</h3>
		<div style="padding:30px 20px;overflow: hidden;border-bottom: 1px solid #eee;">
			<el-input v-model="listQuery.nameInput"  @keyup.enter.native="searchName" placeholder="请根据用户昵称，手机号或用户ID搜索" style="width: 400px"></el-input>
			<el-button class="search" type="success" icon="el-icon-search" @click="searchName">搜索</el-button>
			<el-button type="primary" @click="linkToGiveList(columnInfo.columnId)">查看赠送列表</el-button>
		</div>
    <div class="c-mh16 c-ml20">
      <el-button v-if="permission == 3" type="primary" @click="giveColumns()">赠送专栏</el-button>
    </div>
    <el-table :data="memberList" row-key="userId" v-loading="listLoading"
              @selection-change="handleSelectionChange"
              element-loading-text="加载中..." border fit highlight-current-row style="width: 100%;font-size: 12px;margin-top: 20px;">
      <el-table-column type="selection" align="center" label="全选">
      </el-table-column>
      <el-table-column align="center" label="用户头像">
          <template slot-scope="scope">
                <img :src="scope.row.headimgurl" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;">
			          <br><span>{{scope.row.nickname}}<br>（ID：{{scope.row.encodeUserId}}）</span>
			        </template>
		      	</el-table-column>

        		 <el-table-column  align="center" label="手机号">
			        <template slot-scope="scope">
			          <span>{{scope.row.mobile}}</span>
			        </template>
			    </el-table-column>
<el-table-column   align="center" label="用户身份">
			        <template slot-scope="scope">
			          <span v-if="scope.row.vipType == 1">普通会员</span>
                <span v-if="scope.row.vipType == 2">vip</span>
                <span v-if="scope.row.vipType == 3">代理商</span>
                <span v-if="scope.row.vipType == 4">svip</span>
                <span v-if="scope.row.vipType == 5">合伙人</span>
                <span v-if="scope.row.vipType == 6">分公司</span>
			        </template>
			    </el-table-column>
     		      	<el-table-column  align="center" label="地区">
			        <template slot-scope="scope">
			          <span>{{scope.row.provinceId}}{{scope.row.cityId}}</span>
			        </template>
			    </el-table-column>
      <el-table-column  width="200" align="center" label="操作" v-if="permission == 3">
        <template slot-scope="scope">
          <b @click="giveColumn(scope.row.userId)">赠送专栏</b>
        </template>
      </el-table-column>
    </el-table>
    <div class="block text-c">
      <!--分页组件 current-page:当前页   -->
      <!--   page-sizes:每页几条数据（选项）   -->
      <!--   page-size:每页几条数据   -->
      <!--   total:总条数   -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
    </div>
	</div>
</template>

<script>
import { getMemberList, toGiveColumn, toGiveColumns } from '@/api/column'
import { knowledge_columns } from '@/utils/permission'
export default {
  data() {
    return {
      permission: 3,
      checked: '', // 多选
      listLoading: false, // 加载时转圈
      listQuery: {
        nameInput: null,
        columnId: 0,
        total: null,
        currentPage: 1,
        searchContent: '' // 搜索框
      },
      memberList: [], // 存储搜索出来会员信息
      columnInfo: [],
      userIdArr: []
    }
  },
  created() {
    this.getModelPermission()
    this.getList()
  },
  methods: {
    getModelPermission() {
      this.permission = knowledge_columns()
    },
    getList() {
      this.listLoading = true
      this.listQuery.columnId = this.$route.params.ColumnId
      getMemberList(this.listQuery).then(res => {
        this.memberList = res.data.data.users.data
        this.columnInfo = res.data.data.column
        console.log(this.columnInfo)
        this.listQuery.total = res.data.data.users.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
      })
    },
    giveColumn(userId) {
      this.$confirm('确定赠送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = { columnId: this.$route.params.ColumnId, userId: userId, columnName: this.columnInfo.name, cover: this.columnInfo.cover }
        toGiveColumn(data).then(res => {
          console.log(data)
          this.$message({
            type: 'info',
            message: '赠送成功！'
          })
          this.getList()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    giveColumns() { // 批量赠送
      if (this.userIdArr.length < 1) {
        this.$message({
          type: 'info',
          message: '请选择用户！'
        })
        return
      }

      this.$confirm('确定赠送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var data = { columnId: this.$route.params.ColumnId, userIdArr: this.userIdArr, columnName: this.columnInfo.name, cover: this.columnInfo.cover }
        console.log(data)
        toGiveColumns(data).then(res => {
          this.$message({
            type: 'info',
            message: '赠送成功！'
          })
          this.getList()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    searchName() {
      this.getList()
    },
    linkToGiveList(id) {
      this.$router.push({ path: `/columns/giveList/${id}` })
    },
    handleSizeChange(val) {
      // 切换每页几条数据方法
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      // 切换当前页码的方法
      this.listQuery.page = val
      this.getList()
    },
    handleSelectionChange(val) {
      // 复选框选择操作 将topicId存进数组 实时变化
      this.multipleSelection = val
      this.userIdArr = []
      val.forEach((row, index) => {
        this.userIdArr.push(row.userId)
      })
    }
  }
}
</script>
<style scoped>
	h3{
		background: #eee;
		border-bottom: 1px solid #eee;
		padding-left: 20px;
		font-weight: 500;
		font-size: 12px;
		line-height: 30px;
		margin: 0;
  }
  .c-ml20{
    margin-left: 20px;
  }
  .c-ww50{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
  }
  .c-ww50 img {
    width: 100%;
		height: 100%;
		vertical-align: middle;
  }
</style>
